<template>
  <div class="p-4">
    <a-row :gutter="10" class="mb-2">
      <a-col v-has-permi="['system:department:add']">
        <a-button color="success" @click="handleAdd">{{
          t("common.add")
        }}</a-button>
      </a-col>
    </a-row>
    <a-table
      :loading="loading"
      rowKey="deptId"
      :columns="columns"
      :data-source="deptList"
      :defaultExpandAllRows="true"
      :pagination="false"
    >
      <template #icon="{ record }">
        <div class="flex justify-center">
          <svg-icon :name="record.icon" />
        </div>
      </template>
      <template #status="{ record }">
        <div class="flex justify-center">
          <span>{{
            record.status === "1" ? t("common.normal") : t("common.deactivate")
          }}</span>
        </div>
      </template>
      <template #action="{ record }">
        <span>
          <a-button
            type="link"
            color="success"
            class="mr-3"
            @click="handleAdd(record)"
            v-has-permi="['system:department:add']"
          >
            {{ t("common.add") }}
          </a-button>
          <a-button
            type="link"
            color="success"
            class="mr-3"
            @click="handleUpdate(record)"
            v-has-permi="['system:department:update']"
          >
            {{ t("common.update") }}
          </a-button>
          <a-popconfirm
            :title="t('common.confirmDelete')"
            :ok-text="t('common.okText')"
            :cancel-text="t('common.cancelText')"
            @confirm="confirm(record)"
            @cancel="cancel"
          >
            <a-button
              type="link"
              color="error"
              v-has-permi="['system:department:delete']"
            >
              {{ t("common.delete") }}
            </a-button>
          </a-popconfirm>
        </span>
      </template>
    </a-table>

    <!-- 操作推窗 -->
    <AddOrUpdate @finished="handleFinished" ref="addOrUpdateRef" />
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, computed } from "vue";
import { Row, Col, Popconfirm, Table } from "ant-design-vue";
import { getDept, delDept } from "@/api/admin/system/dept";
import { handleTree } from "@/utils/tools";
import { useUserStore } from "@/store/modules/user";
import { message as Message } from "ant-design-vue";
import { useAppStore } from "@/store/modules/app";
import { IDept } from "@/api/admin/system/dept/type";
import { useI18n } from "@/hooks/useI18n";
import AddOrUpdate from "./AddOrUpdate.vue";

const { t } = useI18n();

// 表头配置
const columns = [
  {
    title: t("routes.dept.deptName"),
    dataIndex: "deptName",
    key: "deptName",
  },
  {
    title: t("routes.dept.orderNum"),
    dataIndex: "orderNum",
    key: "orderNum",
    align: "center",
  },
  {
    title: t("routes.dept.status"),
    dataIndex: "status",
    key: "status",
    align: "center",
    slots: { customRender: "status" },
  },
  {
    title: t("routes.dept.createdAt"),
    dataIndex: "createdAt",
    key: "createdAt",
    align: "center",
  },
  {
    title: t("routes.dept.action"),
    key: "action",
    align: "center",
    slots: { customRender: "action" },
  },
];
export default defineComponent({
  name: "Dept",
  components: {
    "a-row": Row,
    "a-col": Col,
    "a-popconfirm": Popconfirm,
    "a-table": Table,
    AddOrUpdate,
  },
  setup() {
    const loading = computed(() => useAppStore().loading);
    const userStore = useUserStore();

    // 获取部门树
    const deptOptions = ref<IDept[]>([]);
    const deptList = ref<IDept[]>([]);
    // 获取部门列表
    const getList = () => {
      getDept().then((res) => {
        // 获取菜单树
        const children = handleTree(
          res.data.rows,
          "deptId",
          "parentId",
          "children",
          userStore.userInfo.deptId
        ).tree;
        const parent = res.data.rows.filter(
          (item) => item.deptId === userStore.userInfo.deptId
        );
        parent[0].children = children;
        deptList.value = parent;
        deptOptions.value = parent;
      });
    };

    const addOrUpdateRef = ref();
    // 完成表单提交回调
    const handleFinished = () => {
      getList();
    };
    // 新增按钮操作
    const handleAdd = (row) => {
      addOrUpdateRef.value.handleShow("add", row);
    };
    // 更新按钮操作
    const handleUpdate = (row) => {
      addOrUpdateRef.value.handleShow("update", row);
    };
    // 确认删除
    const confirm = (row) => {
      delDept(row.deptId).then(() => {
        getList();
        Message.success(t("common.deleteSuccess"));
      });
    };
    // 取消删除
    const cancel = (e: MouseEvent) => {
      console.log(e);
      Message.success(t("common.cancelDelete"));
    };

    // 初始化
    const init = () => {
      getList();
    };
    onMounted(async () => {
      init();
    });

    return {
      t,
      loading,
      deptList,
      confirm,
      cancel,
      columns,
      handleAdd,
      handleUpdate,

      addOrUpdateRef,
      handleFinished,
    };
  },
});
</script>
